<!--
 * @Author: ZCL
 * @Date: 2020-05-18 09:03:12
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-18 09:06:05
-->
<template>
  <!-- 操作记录 start -->
  <div class="record-box">
    <div class="title" v-show="isTextShow">操作记录</div>
    <div class="record">
      <div
        v-for="(item,index) in recordList"
        :key="index">
        <div :class="item.label === '领用记录'? 'item': item.label === '报修记录'? 'item item2' : item.label === '转移记录'? 'item item3': 'item item4'"
          @click="handleRecordList(item.type)"
        >
          <!-- <div class="dot"></div> -->
          <van-image width="24px" height="24px" :src="item.image"/>
          <p>{{ item.label }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 操作记录 end -->
</template>

<script>
import { OPERATE_TYPES } from '@/constant';

export default {
  name: 'Record',
  props: {
    // 是否显示'操作记录'标题
    isTextShow: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      recordList: [
        {
          label: '领用记录',
          image: require('@/assets/icon/my/my-a.png'),
          type: OPERATE_TYPES.RECEIVE
        },
        {
          label: '报修记录',
          image: require('@/assets/icon/my/my-b.png'),
          type: OPERATE_TYPES.REPAIR
        },
        {
          label: '转移记录',
          image: require('@/assets/icon/my/my-c.png'),
          type: OPERATE_TYPES.TRANSFER
        },
        {
          label: '退还记录',
          image: require('@/assets/icon/my/my-d.png'),
          type: OPERATE_TYPES.RETURN
        }
      ]
    };
  },
  methods: {
    // 前往记录详情
    handleRecordList (type) {
      this.$emit('go-record', type);
    }
  }
};
</script>
<style lang="scss" scoped>
  .record-box {
    background-color: #fff;
    font-size: 12px;
    .title {
      font-size: 16px;
      color: #333;
      padding: 20px 0 20px 20px;
    }
    .record {
      display: flex;
      align-items: center;
      margin-left: 20px;
      padding-bottom: 20px;
    }
    .item {
      color: #B34F4F;
      background-color: #fcf6f6;
      width: 72px;
      height: 72px;
      text-align: center;
      padding: 16px 0 8px;
      border-radius: 3px;
      margin-right: 15px;
      position: relative;
      .dot {
        position: absolute;
        top: -5px;
        right: -2px;
        width: 14px;
        height: 14px;
        background-color: #F26161;
        border-radius: 50%;
      }
      p {
        padding-top: 8px;
      }
    }
    .item2 {
      color: #C89153;
      background-color: #fcf7f1;
    }
    .item3 {
      color: #CCA923;
      background-color: #faf7eb;
    }
    .item4 {
      color: #B9752B;
      background-color: #fff7ee;
    }
  }
</style>
